<template>
    <!--右边导航-->
    <div class="dpa-right-menu">
        <div class="dpa-right-menu_box">
            <div class="auxiliary-decision-icon">
                <img :src="auxiliaryDecisionImg" @click="handlerShow" />
            </div>
            <div class="menu-list" :class="[isShow ? 'move_origin' : 'move-left']">
                <div
                    v-for="(menu, index) in menuList"
                    :key="index"
                    class="menu-content"
                    :style="getRightMenuStyle"
                    @click="gotoDetailPage(menu)"
                >
                    <div class="menu-icon">
                        <div class="menu-icon-value">
                            <div class="icon-border">
                                <img
                                    v-if="menu.iconType === 'CUSTOM' || menu.icon.startsWith('data:image')"
                                    class="anticon icon-bg icon-style"
                                    :src="menu.icon"
                                    alt=""
                                />
                                <component v-else :is="`${menu.icon}`" />
                            </div>
                        </div>
                    </div>
                    <div class="menu-info">
                        <span>{{ menu.name || menu.title }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent, computed, watch, ref } from 'vue'
    import auxiliaryDecisionImg from '@/assets/images/auxiliaryDecision.png'
    import { setStorage } from '@/utils/common'
    import { CURRENT_URL } from '@/enums/cacheEnum'
    import { useRoute, useRouter } from 'vue-router'
    import { getFullUrl } from "@/utils/index";
    export default defineComponent({
        name: 'DpaRightMenu',
        props: {
            menuList: {
                type: Array,
                default: () => []
            },
            config: {
                type: Object,
                default: () => ({})
            }
        },
        setup(props) {
            // ---------------------------------------------------- 属性
            const isShow = ref(true)
            const dpaRightConfig = ref(props.config)
            const formId = ref('') // fomId
            const route = useRoute()
            const router = useRouter()
            // ---------------------------------------------------- 监听
            const getRightMenuStyle = computed(() => {
                const {
                    marginSetting: {
                        rightNavigation: { menuSpacing }
                    }
                } = dpaRightConfig.value
                return `margin-bottom: ${menuSpacing}px`
            })
            watch(
                () => props.config,
                value => {
                    dpaRightConfig.value = value
                },
                {
                    deep: true
                }
            )
            // ---------------------------------------------------- 方法
            function init() {
                const {
                    params: { appId }
                } = route
                formId.value = appId as string
            }
            function handlerShow() {
                isShow.value = !isShow.value
            }
            function gotoDetailPage({ menuUrl: path, code, children, contentSetting }) {
                if (children && children.length) {
                    const [item] = children
                    path = item.menuUrl
                }
                if (path.startsWith('app_')) {
                    path = '/' + path
                }
                setStorage(CURRENT_URL, path)
                // 连接中带有参数，解析出来
                const routerQuery = {}
                if (contentSetting && contentSetting.settingType === 'CUSTOM_PAGE') {
                    routerQuery['iframe_url'] = contentSetting.settingId
                }
                // 如果链接中有参数，从链接中解析出来
                if (path.indexOf("?") > -1) {
                  const url = path.split("?")[1];
                  const urlArr = url.split("&");
                  urlArr.forEach((item) => {
                    const [key, value] = item.split("=");
                    routerQuery[key] = value;
                  });
                }
                const routeUrl = router.resolve({
                    path: getFullUrl(path),
                    query: Object.assign(routerQuery, { dpaDetail: 'dpaDetail', code, formId: formId.value })
                })

                window.open(routeUrl.href, '_blank')
            }
            // ---------------------------------------------------- 初始化
            init()
            return {
                auxiliaryDecisionImg,
                dpaRightConfig,
                formId,
                isShow,
                getRightMenuStyle,
                gotoDetailPage,
                handlerShow
            }
        }
    })
</script>

<style lang="less" scoped>
    .dpa-right-menu {
        display: flex;
        height: 100%;

        .dpa-right-menu_box {
            @keyframes move_right {
                from {
                    opacity: 1;
                }

                to {
                    opacity: 0;
                    transform: translateX(187px);
                }
            }
            @keyframes move_origin {
                from {
                    opacity: 0;
                    transform: translateX(187px);
                }

                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
            display: flex;
            flex-direction: column;
            height: 100%;
            text-align: center;
            width: 135px;

            .auxiliary-decision-icon {
                padding: 0px;
                margin-bottom: 26px;
                display: flex;
                flex-direction: row;
                justify-content: center;

                img {
                    width: 64px;
                    height: 64px;
                    cursor: pointer;
                }
            }

            .menu-list {
                font-size: 14px;
                color: #fff;
                font-family: Microsoft YaHei;
                height: 100%;
                animation-duration: 0.3s;
                animation-iteration-count: 1;
                animation-direction: alternate;
                animation-fill-mode: forwards;
                overflow-y: auto;
                overflow-x: hidden;

                .menu-content {
                    height: 48px;
                    line-height: 48px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    .menu-icon {
                        width: 30px;
                        height: 100%;
                        position: relative;

                        .menu-icon-value {
                            width: 48px;
                            height: 48px;
                            box-sizing: border-box;
                            padding: 1px;
                            border-radius: 50%;
                            background-image: linear-gradient(
                                to right,
                                rgba(255, 213, 103, 0),
                                rgba(255, 215, 126, 1),
                                rgba(255, 215, 145, 0)
                            );

                            .icon-border {
                                width: 100%;
                                height: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 50%;
                                background: rgba(18, 32, 55, 1);
                            }

                            img {
                                width: 32px;
                                height: 32px;
                            }
                        }
                    }

                    .menu-info {
                        width: 111px;
                        min-width: 111px;
                        overflow: hidden;
                        flex: 1;
                        height: 40px;
                        line-height: 40px;
                        background-image: linear-gradient(270deg, rgba(2, 10, 25, 0) 0%, #1f2c48 100%);

                        span {
                            display: inline-block;
                            width: 90px;
                            padding-left: 13px;
                        }
                    }
                }

                &.move-left {
                    animation-name: move_right;
                    left: 187px;
                }

                &.move_origin {
                    left: 0;
                    animation-name: move_origin;
                }
            }
        }
    }
</style>
